﻿<!--
> Muaz Khan     - https://github.com/muaz-khan 
> MIT License   - https://www.webrtc-experiment.com/licence/
> Experiments   - https://github.com/muaz-khan/WebRTC-Experiment
-->

<!DOCTYPE html>
<html id="home" lang="en">

    <head>
        <title>Share files using File.js  ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css">
        <style>
            p { padding: .8em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }
        </style>
        <!-- for HTML5 el styling -->
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
    
        <script type="text/javascript" src="https://www.webrtc-experiment.com/syntax/sh_main.min.js"> </script>
        <script type="text/javascript" src="https://www.webrtc-experiment.com/syntax/sh_javascript.min.js"> </script>
        <script type="text/javascript" src="https://www.webrtc-experiment.com/syntax/sh_html.min.js"> </script>
        <link type="text/css" rel="stylesheet" href="https://www.webrtc-experiment.com/syntax/sh_style.css">
    </head>

    <body onload="sh_highlightDocument();">
        <article>
            <header style="text-align: center;">
                <h1>Share files using <a href="https://www.WebRTC-Experiment.com/File.js" target="_blank">File.js</a></h1>
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                        
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                        
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                        
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                        
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

            <div class="github-stargazers"></div>
            
            <blockquote class="inline">
                Relevant tutorial: <a href="https://www.webrtc-experiment.com/docs/how-file-broadcast-works.html">How to share files using WebRTC Data Channel (RTP/SCTP) APIs?</a>
                
                <p>
                    This tutorial introduces a new library called "<a href="https://www.WebRTC-Experiment.com/File.js" target="_blank">File.js</a>" which can be used alongwidth any framework or realtime protocol like WebSockets/SCTP/etc. to share files of any size concurrently.
                </p>
            </blockquote>

            <section class="experiment">
		
            <h2>First Step: Link the Library</h2>
		
            <pre class="sh_javascript">
&lt;script src="https://www.WebRTC-Experiment.com/File.js"&gt;&lt;/script&gt;
</pre>
            </section>
            
            <section class="experiment">

            <h2>Second Step: Setup ProgressBar Helpers</h2>
		
            <pre class="sh_javascript">
var progressHelper = {};
var outputPanel = document.body;

var fileHelper = {
    onBegin: function (file) {
        var div = document.createElement('div');
        div.title = file.name;
        div.innerHTML = '&lt;label&gt;0%&lt;/label&gt; &lt;progress&gt;&lt;/progress&gt;';
        outputPanel.insertBefore(div, outputPanel.firstChild);
        progressHelper[file.uuid] = {
            div: div,
            progress: div.querySelector('progress'),
            label: div.querySelector('label')
        };
        progressHelper[file.uuid].progress.max = file.maxChunks;
    },
    onEnd: function (file) {
        progressHelper[file.uuid].div.innerHTML = '&lt;a href="' + file.url + '" target="_blank" download="' + file.name + '"&lt;' + file.name + '&lt;/a&gt;';
    },
    onProgress: function (chunk) {
        var helper = progressHelper[chunk.uuid];
        helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
        updateLabel(helper.progress, helper.label);
    }
};

function updateLabel(progress, label) {
    if (progress.position == -1) return;
    var position = +progress.position.toFixed(2).split('.')[1] || 100;
    label.innerHTML = position + '%';
}
</pre>
            </section>
            
            <section class="experiment">
            <ol>
                <li>
                    "progressHelper" is a user-defined variable used to store progress-bars of the each file. It is useful to display multiple progress-bars at the same time!
                </li>
                <li>"outputPanel" is another user-defined variable used to display progress-bars.</li>
                <li>"uuid" is files unique identifier; used to allow multiple files "concurrent" but "guaranteed" transmission.</li>
            </ol>
            
            </section>
            
            <section class="experiment">
		
            <h2>Third Setp: Send One or More Files Concurrently</h2>
            <pre class="sh_javascript">
File.Send({
    file: file,
    channel: peer,
    interval: 100,
    chunkSize: 1000, // 1000 for RTP; or 16k for SCTP
                     // chrome's sending limit is 64k; firefox' receiving limit is 16k!
	
    onBegin: fileHelper.onBegin,
    onEnd: fileHelper.onEnd,
    onProgress: fileHelper.onProgress
});
</pre>

            </section>
            
            <section class="experiment">
            <ol>
                <li>"file" can be input[type=file] or Blob</li>
                <li>"channel" can be socket.io, websockets or webrtc-peer</li>
                <li>"interval" is optional; lets you customize how quickly transmit chunks</li>
                <li>"chunkSize" lets you customize size of the single chunk; default is 40k</li>
                <li>"onBegin" is fired as quickly as you send a file</li>
                <li>"onProgress" is fired on sending a chunk</li>
                <li>"onEnd" is fired on sending entire file</li>
            </ol>
            
            </section>
            
            <section class="experiment">

            <h2>Fourth Step: Receive Files</h2>
		
            <pre class="sh_javascript">
var fleReceiver = new File.Receiver(fileHelper);
peer.onmessage = function (data) {
    fleReceiver.receive(data);
};
</pre>

            </section>
            
            <section class="experiment">
            <ol>
                <li>
                    On the constructor; you need to pass an object like {onBegin, onEnd, onProgress}:
                    <ol>
                        <li>"onBegin" is fired as quickly as you send a file</li>
                        <li>"onProgress" is fired on receiving a chunk</li>
                        <li>"onEnd" is fired on receiving entire file</li>
                    </ol>
				
                </li>
                <li>"receive" method must be called as soon as your signalling solution gets/receives the chunk.</li>
            </ol>
            
            </section>

            <br />
            <br />
            <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
                <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
            
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
    
        <!-- commits.js is useless for you! -->
        <script src="https://www.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
